<template>
	<el-col v-if="componentModel.bigScreen==undefined ||componentModel.bigScreen==false" :span="componentModel.col" style="width: 100%;height:200px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04)" :id="componentModel.id">
	</el-col>
	<el-col :span="componentModel.col" v-else
		style="width: 100%;height:200px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);"
		class="panel">
		<div :id="componentModel.id" style="width: 100%;height:200px;"></div>
		<div class="panel-footer"></div>
	</el-col>
</template>

<script>
	import * as echarts from 'echarts';
	import utils from '@/utils/utils.js';
	export default {
		name: "VBarChartComponent",
		props: ["componentModel"],
		data() {
			return {
				myChart: null
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
			this.myChart = echarts.init(document.getElementById(this.componentModel.id));
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			setProp(prop) {
				var optionData = prop["option"];
				if (optionData != undefined) {
					var option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						legend: {
							left: "right"
						},
						title: {
							text: this.componentModel.title,
							left: "center",
							subtext: this.componentModel.subtitle,
							textStyle:{
								color:this.componentModel.bigScreen?"white":"black"
							},subtextStyle:{
								color:this.componentModel.bigScreen?"white":"black"
							}
						},
						xAxis: [{
							type: 'category',
							data: optionData.category,
						}],
						yAxis: [{
							type: 'value',
						}],
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
					};
					var series = [];
					for (var i = 0; i < optionData.series.length; i++) {
						series.push({
							type: 'bar',
							name:optionData.series[i].name,
							data: optionData.series[i].value,
						})
					}
					option["series"] = series;
					this.myChart.setOption(option,true);
				}else if(optionData==null){
					option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						}
					};
					this.myChart.setOption(option,true);
				}
			}
		},
	}
</script>

<style>
</style>
